<template>
  <div style="width:100%;float:left">
      <div class="list">
          <ul class="list-ul">
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
              <li>
                  <p>诗经</p>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            items:{
                year:'2015',
                month:'Mar',
                engContent:'Conference of Heijingyuan',
                content:'和静园新年茶会',
                addr:'北京'
            }
        }
    }
}
</script>

<style scoped>
ul{
    margin: 0;
    padding: 0;
}
    .list{
        width: 100%;
        float: left;
    }
    .list-ul{
        margin: 3rem 15%;
        width: 70%;
        float: left;
    }
    .list-ul li{
        width: 30%;
        float: left;
        list-style-type: none;
        height: 20rem;
        border: 1px solid #ccc;
        margin-right: 5%;
        margin-bottom: 3rem;
        position: relative;
        z-index: -1;
    }
    .list-ul li p{
        position: absolute;
        top: 20.5rem;
        width: 100%;
    }
    .list-ul li:nth-child(2n){
        background-image: url('../assets/e.jpg');
        background-size: 100% 100%;
    }
    .list-ul li:nth-child(2n+1){
        background-image: url('../assets/e.jpg');
        background-size: 100% 100%;
    }
    .list-ul li:nth-child(3n){
        margin-right: 0;
    }
    @media only screen and (max-width:768px) {
        .list-ul li{
            width:100%;
            margin:2rem 0;
        }
    }
    @media only screen and (min-width:770px) and (max-width:992px) {
        .list-ul li{
            width:40%;
            margin:2rem 5%;
        }
        .list-ul li:nth-child(3n){
            margin-right: 5%;
        }
    }
</style>
